<!--购物车-->
<template>
    <div class="cart">
        <receiving-address @getAddress="getAddress"></receiving-address>
        <el-table ref="multipleTableRef" :data="dataArray" stripe:true tooltip-effect="dark"
            style="width: 100%;margin-top: 20px;" :reserve-selection="true" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="商品">
                <template #default="scope">
                    <div class="goods">
                        <img :src="scope.row.picture" alt="" />
                        <div class="info">
                            <h4 class="title">{{ scope.row.title }}</h4>
                            <p class="content">{{ scope.row.content }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="单价" width="120">
                <template #default="scope">
                    <p class="price">￥{{ scope.row.price }}</p>
                </template>
            </el-table-column>
            <el-table-column label="数量" width="180">
                <template #default="scope">
                    <el-input-number v-model="scope.row.count" @change="handleChange($event, scope.row)" :min="1"
                        :max="1000000000" style="width:120px;">
                    </el-input-number>
                </template>
            </el-table-column>
            <el-table-column label="操作" show-overflow-tooltip width="100">
                <template #default="scope">
                    <el-button type="info" class="delete-bar" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px" class="cancle">
            <el-button @click="toggleSelection">取消选择</el-button>
        </div>
        <div class="submit">
            <div class="total-price">
                <span>总价:￥{{ totalprice }}</span>
            </div>
            <el-button type="danger" @click="payment" class="place-order">提交订单</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import ReceivingAddress from "@/components/ReceivingAddress.vue"
import { cartDeleteOrder, cartShow, updateGoodsCount, addOrder } from "@/api/cart"
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ElTable } from 'element-plus'

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<never[]>([])
const dataArray = ref([]);
const totalprice = ref(0);
const address = ref({});

//加载数据
const load = () => {
    cartShow().then((res) => {
        if (res.flag == true) {
            dataArray.value = res.data;
        } else {
            ElMessage.error('您未登录，请先登录')
        }
    })
}
load()


//提交订单
const payment = () => {
    if (multipleSelection.value && multipleSelection.value.length > 0 && address.value) {
        ElMessageBox.confirm(
            '确认提交订单吗?',
            '警告',
            {
                confirmButtonText: '确定',
                cancelButtonText: '再想想',
                type: 'warning',
            }
        ).then(() => {
            console.log('multipleSelection.value', multipleSelection.value)
            console.log('address.value', address.value)
            addOrder({
                addId: address.value.id,
                count: totalprice.value,
                data: multipleSelection.value,
            }).then((res) => {
                if (res.flag == true) {
                    ElMessage.success('提交成功！')
                    load()
                } else {
                    ElMessage.error('提交失败！')
                }
            })

        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作！',
            })
        })
    } else {
        ElMessage.error('请选择商品和地址！')
    }
}


//选择
const handleSelectionChange = (val: never[]) => {
    totalprice.value = 0
    multipleSelection.value = val
    //计算总价
    if (multipleSelection.value && multipleSelection.value.length > 0) {
        for (let i = 0; i < multipleSelection.value.length; i++) {
            totalprice.value = totalprice.value + (Number(multipleSelection.value[i].price) * multipleSelection.value[i].count)
        }
    }
}


//取消选择
const toggleSelection = () => {
    totalprice.value = 0
    multipleTableRef.value!.clearSelection()
}


//更新商品数量
const handleChange = (val: number, row: any) => {
    updateGoodsCount({
        count: val,
        id: row.shoppingId
    }).then(res => {
        if (res.flag == true && multipleSelection.value && multipleSelection.value.length > 0) {
            handleSelectionChange(multipleSelection.value)
        }
    }).catch(err => {
        console.log(err)
    })
}

//删除
const deleteClick = (row) => {
    console.log('row', row)
    ElMessageBox.confirm(
        '确认删除该商品吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '再想想',
            type: 'warning',
        }
    )
        .then(() => {
            cartDeleteOrder({
                order_id: row.shoppingId,
            }).then((res) => {
                if (res.flag == true) {
                    ElMessage.success("删除成功");
                    load()
                } else {
                    ElMessage.error('删除失败')
                }
            }).catch((err) => {
                ElMessage.error("删除失败");
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作！',
            })
        })
}

//getAddress
const getAddress = (val) => {
    address.value = val
}

</script>

<style lang="scss" scoped>
.cart {
    width: 1100px;
    margin: 10px auto;
    background: #fff;
    padding: 10px 20px;


    .goods {
        width: 500px;

        img {
            float: left;
            width: 150px;
            height: 100px;
            margin-right: 10px;
            border-radius: 6px;
        }

        .info {
            // float: left;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;

            .title {
                margin: 0;
            }

            .content {
                height: 65px;
                // width: 200px;
                /*超出的部分隐藏*/
                overflow: hidden;
                /*文字用省略号替代超出的部分*/
                text-overflow: ellipsis;
                /*弹性伸缩盒子模型显示*/
                display: -webkit-box;
                /*限制在一个块元素显示文本的行数*/
                -webkit-line-clamp: 3;
                /*设置或检索伸缩盒对象的子元素排列方式*/
                -webkit-box-orient: vertical;
            }
        }
    }

    .price,
    .subtotal {
        color: red;
    }

    .count {
        .itxt {
            width: 40px;
            height: 30px;
            margin: 0 10px;
        }

        button {
            display: inline-block;
            width: 20px;
            height: 20px;
            padding: 0;
            text-align: center;
            line-height: 20px;
            border: 1px solid darkgray;
            font-size: 20px;
        }
    }

    .cancle {
        float: left;
    }

    .submit {
        margin-top: 20px;
        float: right;
        width: 300px;
        height: 40px;

        .total-price {
            font-size: 20px;
            float: left;
            color: red;
            // margin-right: 50px;
            line-height: 40px;
        }

        .place-order {
            float: right;
        }
    }
}

.delete-bar {
    width: 60px;
    height: 30px;
    padding: 0;

    span {
        margin: 0;
    }
}
</style>